<template>
   <div>
      <el-button type="success " @click="open" class="left">添加</el-button>
      <el-table :data="tableData" style="width: 100%">
         <el-table-column label="角色名" width="280">
            <template slot-scope="scope">
               <span style="margin-left: 10px">{{ scope.row.roleName }}</span>
            </template>
         </el-table-column>
         <el-table-column label="角色描述" width="280">
            <template slot-scope="scope">
               <span style="margin-left: 10px">{{ scope.row.description }}</span>
            </template>
         </el-table-column>
         <el-table-column label="操作">
            <template slot-scope="scope">
               <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
               <el-button size="mini" type="danger" @click="handleDelete(scope.row.roleId)">删除</el-button>
               <el-button size="mini" @click="distributePermissionsUI(scope.row)">分配权限</el-button>
            </template>
         </el-table-column>
      </el-table>
      <!-- 模态框添加与修改操作 -->
      <el-dialog :title="tishi" :visible.sync="dialogVisible" width="30%">
         <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="角色">
               <el-input v-model="form.roleName"></el-input>
            </el-form-item>
            <el-form-item label="描述">
               <el-input v-model="form.description"></el-input>
            </el-form-item>
            <el-form-item>
               <el-button type="primary" @click="onSubmit">{{ tishi }}</el-button>
               <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
         </el-form>
      </el-dialog>
      <!-- Form -->
      <el-dialog title="权限分配" :visible.sync="dialogFormVisible" width="500px">
         <el-tree :data="root" :show-checkbox="true" node-key="permissionId" :default-expand-all="true" ref="tree"
            :expand-on-click-node="false" :props="{ label: 'permissionName', children: 'children' }"
            :highlight-current="true" :default-checked-keys="checked" style="width: 400px;">
            <span class="custom-tree-node" slot-scope="{ node, data }">
               <span>{{ node.label }}</span>
            </span>
         </el-tree>
         <div slot="footer" class="dialog-footer">
            <el-button @click="closeForm">取 消</el-button>
            <el-button type="primary" @click="distributePermissions">确认分配</el-button>
         </div>
      </el-dialog>
   </div>
</template>
<script>
import { findAll, del, saveAndUpdate } from "@/api/role/role.js";
import { getRoot, getPermission, distributePermissions} from '@/api/Permission/Permission.js';

export default {

   data() {
      return {
         dialogVisible: false,
         tishi: "",
         form: {},
         tableData: [],
         dialogFormVisible: false,
         root: [],
         checked: [],
         currRole: {}
      }
   },
   mounted() {
      this.getList();
   },
   methods: {
      getList() {
         findAll().then(res => {
            this.tableData = res.data
         })
      },
      handleEdit(dept) {
         this.tishi = "修改";
         let deptJson = JSON.stringify(dept);
         this.form = JSON.parse(deptJson);
         this.dialogVisible = true;
      },
      open() {
         this.form = {};
         this.tishi = "添加";
         this.dialogVisible = true;
      },
      onSubmit() {
         let path = "role/save";
         this.form.roleId ? path = "role/update" : path;
         saveAndUpdate(path, this.form).then(res => {
            if (res.code == 200) {
               this.dialogVisible = false;
               this.$message.success(res.msg);
               this.form = {};
               this.getList();
            } else {
               this.dialogVisible = false;
               this.$message.error(res.msg);
            }
         });
      },
      handleDelete(id) {
         this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
         }).then(() => {
            console.log(id);
            del(id).then(res => {
               if (res.code == 200) {
                  this.$message.success(res.msg);
                  this.getList();
               } else {
                  this.$message.error(res.msg);
               }
            });
         }).catch(() => {
            this.$message({
               type: 'success',
               message: '取消删除'
            });
         });
      },
      distributePermissionsUI(row) {
         getRoot().then(r => {
            let d = [r.data]
            this.root = d
            getPermission(row.roleId).then(r => {
               this.checked = r.data;
               this.currRole = row
               this.dialogFormVisible = true;
            })
         })
      },
      distributePermissions(){
         let permissionIds = this.$refs.tree.getCheckedKeys(true);
         distributePermissions(this.currRole.roleId, permissionIds).then(r => {
            if (r.code == 200) {
               this.$message.success(r.msg)
               this.closeForm();
               return;
            }
            this.$message.error(r.msg)
         })
      },
      closeForm(){
         this.checked = [];
         this.dialogFormVisible = false
      }
      
   },
}
</script>
<style  scoped></style>

